<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <title>运动计划-${not empty coursewares ? coursewares[0].movement.name : ''}</title>
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current bg-light-gray">
        <nav class="bar bar-tab punch-card-bar">
          <a class="tab-item external active" href="${ctx.host}/courses/${dailyCourseware.batch.monthly.id}/batches/${dailyCourseware.batch.id}/units">
            <span class="icon icon-today active"></span>
            <span class="tab-label">今日</span>
          </a>
          <a class="tab-item external" href="${ctx.host}/courses">
            <span class="icon icon-lesson"></span>
            <span class="tab-label">课程</span>
          </a>
          <a class="tab-item external" href="${ctx.host}/profile">
            <span class="icon icon-profile"></span>
            <span class="tab-label">我的</span>
          </a>
        </nav>

        <div class="content homework-page">
          <c:forEach var="courseware" items="${coursewares}" varStatus="status">
            <div class="card no-margin homework-card" data-id="${status.index+1}" style="${status.index == 0 ? '' : 'display:none;'}" data-name="运动计划-${courseware.movement.name}">
              <div class="card-content">
                <c:choose>
                  <c:when test="${not empty courseware.movement.videoLink}">
                    <div class="course-preview">
                      <video id="video${courseware.id}" data-courseware="${courseware.id}" class="video-js vjs-big-play-centered" data-link="${courseware.movement.videoLink}" ></video>
                    </div>
                  </c:when>
                  <c:otherwise>
                     <img src="${cloud.prod}/${courseware.movement.cover}" onerror="this.src='${ctx.resource}/image/error.jpg'" width="100%">
                  </c:otherwise>
                </c:choose>
                <c:if test="${dailyCourseware.status.finished}">
                  <div class="finish status-label">已打卡</div>
                </c:if>
              </div>
              <div class="details">
                <div class="clearfix action-title">
                  <span class="pull-left">${courseware.movement.category.name}</span>${courseware.movement.name}<!-- <span class="icon icon-up pull-right updown-btn"></span> -->
                </div>
                <div class="description">
                  <h5>计划</h5>
                  <pre>${courseware.actDescription}</pre>
                  <h5>要领</h5>
                  <pre>${courseware.movement.summary}</pre>
                </div>
              </div>
              <%-- <div class="card-footer">
                <a href="javascript: void(0);" class="link" style="font-size: .9rem; font-weight: bold;"></a>
                <a href="javascript: void(0);" class="link">${courseware.actDescription}</a>
              </div> --%>
            </div>
          </c:forEach>
          <div class="button-wrap clearfix">
            <c:choose>
              <c:when test="${dailyCourseware.status.finished}">
                <button class="button button-fill ft-market-btn ft-button-yellow pull-left hide prevbtn" data-action="prev"><span class="icon-prev"></span>&nbsp;&nbsp;上一个</button>
                <button class="button button-fill ft-market-btn ft-button-yellow pull-right  nextbtn ${fn:length(coursewares) > 1 ? '' : 'hide'}" data-action="next">下一个&nbsp;&nbsp;<span class="icon-next"></span></button>
                <a href="${ctx.host}/courses/${dailyCourseware.batch.monthly.id}/batches/${dailyCourseware.batch.id}/units/${dailyCourseware.id}/result" class="button button-fill ft-market-btn ft-button-yellow signin-result ${coursewareAmount <= 1 ? '' : 'pull-right hide'}" style="${coursewareAmount <= 1 ? 'width:100%;' : ''}">打卡结果&nbsp;&nbsp;<span class="icon-next"></span></a>
              </c:when>
              <c:otherwise>
                <button class="button button-fill ft-market-btn ft-button-yellow pull-left hide prevbtn" data-action="prev"><span class="icon-prev"></span>&nbsp;&nbsp;上一个</button>
                <button class="button button-fill ft-market-btn ft-button-yellow pull-right nextbtn ${fn:length(coursewares) > 1 ? '' : 'hide'}" data-action="next">下一个&nbsp;&nbsp;<span class="icon-next"></span></button>
                <a href="javascript: void(0);" class="button button-fill ft-market-btn ft-button-yellow end-btn ${coursewareAmount <= 1 ? '' : 'pull-right hide'}" style="${coursewareAmount <= 1 ? 'width:100%;' : ''}">运动结束&nbsp;&nbsp;<span class="icon-next"></span></a>
              </c:otherwise>
            </c:choose>
          </div>
          <!-- <a href="javascript: void(0);" class="button button-fill ft-market-btn ft-button-yellow end-btn hide">运动结束</a> -->
        </div>
        
      </div>
    </div>
    
    <script src="${ctx.resource}/js/component/qiniuplayer.min.js" ></script>
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <script type="text/javascript">
      function load() {
        var length = document.querySelectorAll(".video-js").length;
        for (var i= 0; i< length; i++) {
          var dataUrl = document.querySelectorAll(".video-js")[i].dataset.link;
          var courseware = document.querySelectorAll(".video-js")[i].dataset.courseware;
          var options = {
              url: dataUrl,
              type: 'mp4',
              preload: false,
              autoplay: true,
              height: 300,
              stretching: 'panscan'
            };
            
          var player = new QiniuPlayer('video'+courseware, options);
          
        }
      }
      
      load();
      
      
      
    </script> 
    <d:resource root="${ctx.resource}/build" type="script" src="js/page/course/unit/unit-homework.js" />
    <script type="text/javascript">
      require(['page/course/unit/unit-homework'], function(page) {
        page.init({
        	"batchId" : "${dailyCourseware.batch.id}",
        	"dailyId" : "${dailyCourseware.id}",
        	"actionAmount" : "${coursewareAmount}",
        	"isSignin" : "${dailyCourseware.status.finished}",
        	"monthlyId" : "${dailyCourseware.batch.monthly.id}"
        })
      })
    </script>
  </body>
</html>